<!DOCTYPE html>
<html>
<head>
    <title>ZenoStat</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h2>CPU Usage (%)</h2>
<canvas id="cpuChart" width="600" height="300"></canvas>

<script>
const ctx = document.getElementById('cpuChart').getContext('2d');
const cpuChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [], // 时间点可以自己补充或用索引
        datasets: [{
            label: 'CPU Usage %',
            data: [],
            borderColor: 'rgba(75, 192, 192, 1)',
            fill: false,
        }]
    },
    options: {
        animation: false,
        scales: {
            y: { min: 0, max: 100 }
        }
    }
});

function fetchData(){
    fetch('/api/cpu')
    .then(res => res.json())
    .then(data => {
        cpuChart.data.labels = data.map((_, i) => i);
        cpuChart.data.datasets[0].data = data;
        cpuChart.update();
    });
}

// 每2秒刷新一次数据
setInterval(fetchData, 2000);
fetchData();
</script>
</body>
</html>
